<template>
  <n-layout has-sider class="h-screen">
    <!-- 左侧可折叠菜单 -->
    <n-layout-sider
        bordered
        collapse-mode="width"
        :collapsed-width="64"
        :width="240"
        :collapsed="collapsed"
        show-trigger
        @collapse="collapsed = true"
        @expand="collapsed = false"
    >
      <layout-sidebar
          :collapsed="collapsed"
          :menu-options="menuOptions"
          @update:value="menuChange"
          :value="route.name"
      />
    </n-layout-sider>

    <!-- 右侧主区域 -->
    <n-layout content-class="flex flex-col">
      <!-- Header -->
      <n-layout-header bordered class="h-16 flex items-center px-6">
        <layout-header/>
      </n-layout-header>

      <!-- Content: 自适应高度 -->
      <n-layout-content class="p-6 flex-1">
        <layout-content ref="contentRef">
          <router-view/>
        </layout-content>
      </n-layout-content>

      <!-- Footer -->
      <n-layout-footer bordered class="h-12 flex items-center justify-center">
        <layout-footer/>
      </n-layout-footer>
    </n-layout>
  </n-layout>
</template>

<script setup>
import {ref, watchEffect} from 'vue'
import LayoutHeader from '@/layouts/header.vue'
import LayoutSidebar from '@/layouts/sidebar.vue'
import LayoutContent from '@/layouts/content.vue'
import LayoutFooter from '@/layouts/footer.vue'
import {filterRoutesByPermission, transformRoutesToMenu} from "@/utils/index.js";
import {routes} from "@/router/routes.js";
import {useRoute, useRouter} from "vue-router";
import {useSettingStore} from "@/store/index.js";
import {useElementSize} from "@vueuse/core";
import {useUserStore} from "@/store/user/index.js";

const router = useRouter()
const route = useRoute()
const setting = useSettingStore()
const userStore = useUserStore()
// 侧边栏折叠状态
const collapsed = ref(false)

// 将路由信息转换成菜单选项
const menuOptions = computed(() => {
  const permissions = userStore.permissionList
  const validRoutes = filterRoutesByPermission(routes, permissions)
  return transformRoutesToMenu(validRoutes)
})

const menuChange = (key) => {
  router.push({name: key})
}

const contentRef = ref(null)
const { width, height } = useElementSize(contentRef)

watchEffect(() => {
  setting.contentWidth = width.value
  setting.contentHeight = height.value
})
</script>

<style scoped>

</style>
